<template>
  <div>
    <div class="songsheet">
      <div>
        <van-nav-bar
          :fixed="true"
          left-text=""
          :title="$route.meta.title"
          @click-left="onClickLeft"
        >
          <template #left>
            <div>
              <span class="iconfont icon-fanhui"> </span>
            </div>
          </template>
          <template #right>
            <div>
              <span class="iconfont icon-gengduo"> </span>
            </div>
          </template>
        </van-nav-bar>
      </div>
      <div class="news">
        <van-card :title="data.dissname" :thumb="data.logo">
          <template #desc>
            <div class="desc">
              <img :src="data.headurl" alt="" />
              <span>{{ data.nick }}</span>
            </div>
          </template>
          <template #price>
            <div class="price">简介: {{ desc }}</div>
          </template>
          <template #footer>
            <div class="iconfont icon-xihuan-copy">
              {{ data.visitnum | num }}
            </div>
            <div class="iconfont icon-pinglun">评论</div>
            <div class="iconfont icon-xingzhuangjiehe">分享</div>
          </template>
        </van-card>
      </div>
      <div class="bofang">
        <div
          class="left iconfont icon-bofang"
          @click="$store.state.icon = false"
        >
          <span class="zi">全部播放({{ data.songnum }})</span>
        </div>
        <div class="right">
          <span class="iconfont icon-xiazai"></span>
          <span class="iconfont icon-piliangcaozuo"></span>
        </div>
      </div>
      <div class="song">
        <van-card
          v-for="(song, inde) in data.songlist"
          :key="song.id"
          @click="
            titleColor(inde, song),
              ($store.state.song = song.songname + '-' + song.singer[0].name),
              ($store.state.icon = false)
          "
        >
          <template #title>
            <div
              :class="{
                title: true,
                titleColor: isActive === inde ? 'titleColor' : '',
              }"
              @click="goDetail('/home/classifyinfo1', song.songmid)"
            >
              {{ song.songname }}
            </div>
          </template>
          <template #desc>
            <div
              :class="{
                desc: true,
                titleColor: isActive === inde ? 'titleColor' : '',
              }"
            >
              <span v-for="(name, index) in song.singer" :key="name.id">
                <span v-if="index > 0">/</span> {{ name.name }}
              </span>
            </div>
          </template>
          <template #thumb>
            <div>
              {{ inde + 1 }}
            </div>
          </template>
          <template #num>
            <div v-if="song.belongCD !== 0" class="iconfont icon-video"></div>
            <div class="iconfont icon-gengduo"></div>
          </template>
        </van-card>
      </div>
    </div>
    <!-- <Commont :id="id"></Commont> -->
  </div>
</template>
<script>
// import Commont from '../../../components/Comment.vue'
export default {
  props: ['id'],
  data: () => ({
    data: {},
    desc: '',
    iconfont: true,
    isActive: null
  }),
  methods: {
    // 获取歌单
    async getSongListDetail() {
      const res = await this.$http.getSongListDetail(this.id)
      // console.log(res.data.data)
      this.data = res.data.data
      res.data.data.desc.split('<br>').forEach(el => {
        this.desc += el
      })
      // console.log(res)
    },
    // 点击返回
    onClickLeft() {
      this.$router.go(-1)
    },
    // 点击歌曲颜色切换
    titleColor(index, song) {
      this.isActive = index
      this.song = song.songname + '-' + song.singer[0].name
      localStorage.song = this.song
    }
  },
  created() {
    this.getSongListDetail()
  },
  components: {
    // Commont
  }
}
</script>
<style lang="less">
.songsheet {
  .van-nav-bar {
    .van-nav-bar__content {
      background: linear-gradient(rgb(0, 81, 255), rgb(93, 141, 245));
    }
    .van-nav-bar__left {
      .iconfont {
        font-size: 16px;
        color: white;
      }
    }
    .van-nav-bar__right {
      .iconfont {
        font-size: 16px;
        color: white;
      }
    }
    .van-nav-bar__title {
      font-size: 20px;
      font-weight: 600;
      color: white;
    }
  }
  .news {
    .van-card {
      color: white;
      background: linear-gradient(rgb(93, 141, 245), rgb(82, 179, 235));
      .van-card__content {
        margin-left: 10px;
      }
      .van-card__title {
        font-weight: 500;
        letter-spacing: 2px;
      }
      .desc {
        display: flex;
        align-items: center;
        margin-top: 5px;
        img {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          margin-right: 10px;
        }
      }
      .van-card__price {
        width: 100%;
        margin-top: 15px;
        .price {
          color: white;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .van-card__footer {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
        .iconfont {
          display: flex;
          color: white;
          &:before {
            margin-right: 5px;
          }
        }
      }
    }
    .van-card:not(:first-child) {
      margin-top: 0px;
    }
  }
  .bofang {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .left {
      color: rgb(14, 253, 173);
      margin-left: 10px;
      .zi {
        color: black;
        margin-left: 10px;
      }
    }
    .right {
      span {
        margin-right: 10px;
      }
    }
  }
  .song {
    .van-card {
      height: 70px;
      .van-card__header {
        height: 70px;
        .van-card__content {
          position: relative;
          min-height: 70px;
          .title {
            width: 85%;
            font-size: 16px;
            font-weight: 600;
            margin-top: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .titleColor {
            color: rgb(10, 233, 159);
          }
          .icon-video {
            position: absolute;
            top: 32%;
            right: 20px;
          }
          .icon-gengduo {
            position: absolute;
            top: 33%;
            right: 0;
          }
        }
      }
      .van-card__title {
        margin-top: 20px;
      }
      .van-card__thumb {
        text-align: center;
        height: 80px;
        line-height: 80px;
        width: 50px;
        font-size: 16px;
      }
    }
  }
}
</style>
